웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
html 문서에서 css를 사용하여 특정 요소의 크기를 원하는 크기만큼 조절할 수 있는 방법을 알아봅니다.
엘리먼트의 크기가 너무 크거나 작은 경우 크기를 조절해야합니다. 하지만 동일한 비율로 크기간 간단하게 조절할 수 있다면 편리할텐데요 이 경우 css의 zoom 프로퍼티를 사용합니다.
# CSS zoom Property
css의 zoom 프로퍼티는 원하는 요소(태그)의 크기를 확대하거나 축소(조절)하게 해줍니다. 사용 방법이 간단하다는 장점이 있는데요 간단하게 원하는 크기를 숫자로 입력하거나 normal 등의 문자 입력만으로 쉽고 빠르게 적용할 수 있죠.div { zoom: 2; }
간단한 사용방법 및 문법은 위와 같습니다. div 태그를 2배 크기로 설정하였음을 의미하죠. 이처럼 숫자를 사용하는 방법이 가장 알아보기 쉽죠. 그럼 간단한 예제를 만들어보겠습니다.
! css zoom 사용 예제보기
만약 엘리먼트의 크기를 현재보다 키우거나 줄이고자합니다. 먼저 텍스트 엘리먼트를 하나 만들겠습니다.<span class="text">Webisfree.com</span>
위 요소의 text 클래스에 각각 일반크기, 2배 크기 마지막으로 50% 크기로 조정해보겠습니다. 아래와 같이 css를 적용합니다.
.text { zoom: normal; }
.text { zoom: 2; color: red; }
.text { zoom: 0.5; color: blue; }
.text { zoom: 2; color: red; }
.text { zoom: 0.5; color: blue; }
위와 같이 적용하면 어떻게 나타날까요? 실제로 코드를 적용한 모습은 아래와 같습니다.
Webisfree.com // zoom: normal
Webisfree.com // zoom: 2
Webisfree.com // zoom: 0.5
크기가 바뀐게 보이시나요? 이처럼 css를 사용하는 것만으로 간단하게 크기 조절이 가능합니다.
! zoom 관련하여 알아둘 사항
zoom은 매우 편리하지만 css 표준 속성이 아닙니다. 이런 이유로 zoom을 사용할 경우 다른 브라우저에서 동작하지 않을 수 있는데 바로 Firefox(파이어폭스) 브라우저가 대표적입니다. 그래서 css 프로퍼티를 사용할 때 zoom보다는 transform이 더 선호됩니다. 게다가 transform은 크기 조절 외에도 더 많은 기능들을 가지고 있죠.좀 더 얘기하자면 예전에는 오히려 transform을 지원하지 않는 브라우저가 많아 사용하지 않았기도 했습니다. 하지만 최근의 브라우저는 transform을 대부분 지원하죠. 다만 transform을 적용했을때와 zoom을 적용했을 때 여백 등의 렌더링 방식이 차이가 나므로 이 둘을 혼합 사용하기 보다는 한 가지를 선택하는 방법이 좋습니다. 아무래도 웹표준을 생각하며 앞으로는 transform을 사용하는 것이 가장 좋을 것입니다.
아래의 글도 찾고 계시지 않나요?
